<template>
	<view>
		<div class="scrollContent">
			<div class="scrollSide">
				<div v-for="(item, index) in themeConfig" v-show="index % 2 == 0" :key="item.key" style="position:relative; height: auto;width:100%;">
					<ThemeCard :info='item' v-if="index % 2 == 0">
					</ThemeCard>
				</div>
			</div>
			<div class="scrollSide">
				<div v-for="(item, index) in themeConfig" v-show="index % 2 == 1" :key="item.key" style="position: relative;height: auto;width:100%;">
					<ThemeCard :info='item' v-if="index % 2 == 1">
					</ThemeCard>
				</div>
			</div>
			<!-- <Grid :column-num="2" style="position: relative;width:50%">
			  <GridItem v-for="item in themeConfig" :key="item.key" icon="photo-o" >
				  <ThemeCard :info='item'></ThemeCard>
			  </GridItem>
			</Grid>
			<Grid :column-num="1" style="position: relative;width:50%">
			  <GridItem v-for="item in themeConfig" :key="item.key" icon="photo-o" >
				  <ThemeCard :info='item'></ThemeCard>
			  </GridItem>
			</Grid> -->
		</div>

	</view>
</template>

<script setup>
	import {} from 'vue'
	import {
		Grid,
		GridItem
	} from 'vant'
	import ThemeCard from '@/components/ThemeCard/ThemeCard.vue'
	import themeConfig from '../../static/themeConfig';
</script>

<style>
	.scrollContent {
		position: flex;
		text-align: left;
		display: flex;
	}

	.scrollSide {
		position: flex;
		width: 50%;
		justify-items: center;
		display: block;
	}
</style>